import React, { PureComponent } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import s from './ColorPicker.less';

export default class ColorPicker extends PureComponent {
    static propTypes = {
        editorState: PropTypes.shape({
            getCurrentInlineStyle: PropTypes.func.isRequired
        }).isRequired,
        onToggle: PropTypes.func.isRequired,
        styleMap: PropTypes.shape({}).isRequired,
        defaultType: PropTypes.string.isRequired,
    };

    render() {
        const {
            editorState, onToggle, styleMap, defaultType, ...otherProps
        } = this.props;
        const currentStyle = editorState.getCurrentInlineStyle();
        const toggle = type => e => {
            e.preventDefault();
            onToggle(type);
        };

        return (
            <div className={s.root} {...otherProps}>
                {Object.keys(styleMap).map(type => (
                    <div key={type} className={s.wrapper} onClick={toggle(type)}>
                        <span
                            style={{ backgroundColor: styleMap[type].color }}
                            className={classnames(s.button, {
                                [s.active]:
                                    currentStyle.has(type)
                                    || (!Object.keys(styleMap).some(t => currentStyle.has(t)) && type === defaultType),
                            })}
                        />
                    </div>
                ))}
            </div>
        );
    }
}
